<template>
    <el-config-provider :locale="zhCn">
        <el-container style="height: 100%;">
            <el-header>
                <div class="TitleBarLine"></div>
                <TitleBar />
            </el-header>
            <div class="ContentLayout">
                <div class="MenuLayout">
                    <Menu />
                </div>
                <div class="ContentLayout">
                    <el-container style="height: 100%;">
                        <el-header>
                            <UserBar />
                        </el-header>
                        <RouterView></RouterView>
            
                    </el-container>
                </div>
            </div>
        </el-container>
    </el-config-provider>
</template>
<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import Menu from './Menu.vue'
import UserBar from './UserBar.vue';
import { RouterView } from 'vue-router';

</script>
<style scoped lang="less">
.ContentLayout {
    width: 100%;
    height: 100%;
    display: flex;
}

:deep(.el-header) {
    padding: 0;
    height: 48px;
}

.TitleBarLine {
    position: fixed;
    height: 48px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
    border-bottom: solid 1px var(--el-menu-border-color);
    z-index: 1;
}
</style>
